<script setup>
import { useWindowSize } from '@vueuse/core'
import MarkerIcon from '~/assets/img/icon_map.png'

const { locale } = useLocale()
const language = ref(locale.value === 'zh' ? 'zh' : 'en')

const { width } = useWindowSize()
const windowWidth = ref(width.value)
watch(width, (newWidth) => {
  windowWidth.value = newWidth
})

const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()
const store = useGlobalStore()
const { company } = storeToRefs(store)

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})
onMounted(() => {
  const lnglat = [117.436542, 24.605625]
  const map = new AMap.Map('map', {
    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
    zoom: 8, // 初始化地图层级
    center: lnglat, // 初始化地图中心点

  })
  //   map.addControl(new AMap.ToolBar())

  const imageSize = new AMap.Size(60, 60)

  const size = new AMap.Size(60, 60)
  const imageOffset = new AMap.Pixel(0, 0)
  const icon = new AMap.Icon({
    size,
    image: MarkerIcon,
    imageSize,
    imageOffset,
  })
  const marker = new AMap.Marker()
  marker.on('click', () => {
    window.open('https://ditu.amap.com/search?query=%E7%A6%8F%E5%BB%BA%E8%B6%85%E7%9B%8A%E9%92%A2%E4%B8%9A%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&city=430000&geoobj=112.198829%7C27.108653%7C115.395325%7C28.931779&zoom=8.97')
  })
  marker.setIcon(icon)
  marker.setPosition(lnglat)
  map.add(marker)
  map.setFitView(marker)
})
useHead({
  title: `联系我们-超益钢业`,
})
</script>

<template>
  <div>
    <div h="[400px]" class="flex flex-col items-center justify-center bg-[url(~/assets/img/img_contact_banner.png)]">
      <h1 class="text-[46px] text-[#fff]" data-aos="fade-down" data-aos-delay="100">
        {{ $t('menu.contact_us') }}
      </h1>
      <h2 text="uppercase [#ffffff33] [42px]" data-aos="fade-up" data-aos-delay="100">
        CONTACT US
      </h2>
    </div>
    <section v-if="windowWidth > 828" style="margin-bottom: 1000px;" v-bind="$attrs" data-aos="fade-right" data-aos-delay="100">
      <div>
        <div class="page-section-content">
          <div class="view">
            <div class="out">
              <h1 class="title">
                {{ get(company, 'name', locale) }}
              </h1>
            </div>
            <ul>
              <li class="itemInfo">
                <img m="r-[32px]" w="[32px]" h="[32px]" src="~/assets/img/icon_phone.png" />
                <span>{{ language === 'zh' ? '电话' : 'telephone' }}<span>:</span> {{ company?.phone }}</span>
              </li>
              <li class="itemInfo">
                <img m="r-[32px]" w="[32px]" h="[32px]" src="~/assets/img/icon_mail.png" />
                <span>{{ language === 'zh' ? '邮箱' : 'e-mail' }}<span>:</span> {{ company?.email }}</span>
              </li>
              <li class="itemInfo">
                <img m="r-[32px]" w="[32px]" h="[32px]" src="~/assets/img/icon_location.png" />
                <span>{{ language === 'zh' ? '地址' : 'address' }}<span>:</span> {{ get(company, 'address', locale) }}</span>
              </li>
            </ul>
          </div>
          <img src="~/assets/img/img_add_bg.png" style="width: 50%;float: right;">
          <div style="position: relative;">
            <div id="map" class="map" data-aos="fade-left" data-aos-delay="500"></div>
          </div>
        </div>
      </div>
    </section>
    <section v-else relative v-bind="$attrs">
      <div>
        <div class="page-section-content">
          <div class="view1" data-aos="fade-right" data-aos-delay="100">
            <div class="out">
              <h1 class="title">
                {{ get(company, 'name', locale) }}
              </h1>
            </div>
            <ul>
              <li class="itemInfo">
                <img m="r-[32px]" w="[32px]" h="[32px]" src="~/assets/img/icon_phone.png" />
                <span>{{ language === 'zh' ? '电话' : 'telephone' }}<span>:</span> {{ company?.phone }}</span>
              </li>
              <li class="itemInfo">
                <img m="r-[32px]" w="[32px]" h="[32px]" src="~/assets/img/icon_mail.png" />
                <span>{{ language === 'zh' ? '邮箱' : 'e-mail' }}<span>:</span> {{ company?.email }}</span>
              </li>
              <li class="itemInfo">
                <img m="r-[32px]" w="[32px]" h="[32px]" src="~/assets/img/icon_location.png" />
                <span>{{ language === 'zh' ? '地址' : 'address' }}<span>:</span> {{ get(company, 'address', locale) }}</span>
              </li>
            </ul>
          </div>
          <div style="padding: 20px;" data-aos="fade-left" data-aos-delay="100">
            <div id="map" class="map1"></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style>
.amap-copyright,
.amap-logo {
  display: none !important;
}
</style>

<style scoped>
.page-section-content {
  position: relative;
  width: 100%;
  bottom: 100px;
  text-align: center;
  margin-top: 100px;
}

.view {
  position: absolute;
  left: 170px;
  top: 200px;
  width: 40%;
  /* height: 150%; */
  border-top: 4px solid #0083ff;
  background-color: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.12);
  padding: 60px 40px 5%;
  box-sizing: border-box;
  z-index: 2;
}
.view1 {
  width: 100%;
  height: 406px;
  border-top: 4px solid #0083ff;
  background-color: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.12);
  padding: 60px 40px 0;
  box-sizing: border-box;
  z-index: 2;
}

.title {
  width: 100%;
  height: 40px;
  font-weight: 400;
  font-size: 32px;
  color: #1f1f1f;
  line-height: 40px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.itemInfo {
  width: 100%;
  height: 28px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 24px;
  color: #1f1f1f;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: flex;
}
.out {
  width: 100%;
  height: 64px;
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #f1f1f1;
}
ul {
  width: 100%;
  height: 192px;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 32px;
}
.map {
  position: absolute;
  right: 7%;
  margin-top: 160px;
  width: 50%;
  height: 540px;
}
.map1 {
  margin-top: 20px;
  width: 100%;
  height: 540px;
  box-sizing: border-box;
}
.address {
  position: absolute;
  right: 44%;
  top: 250px;
  width: 100px;
}
</style>
